<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="60px"
    class="demo-ruleForm"
  >
    <el-form-item label="link" prop="link">
      <el-input v-model.number="ruleForm.link" />
    </el-form-item>

    <el-form-item label="alt" prop="alt">
      <el-input v-model="ruleForm.alt" autocomplete="off" />
    </el-form-item>

    <el-form-item>
      <el-upload
        class="avatar-uploader"
        :http-request="httprequestFn"
        :show-file-list="false"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="base64" prop="img">
      <el-input v-model="ruleForm.img" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >提交</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { addswiperlist } from "@/api/swiperapi";
export default {
  name: "",
  data() {
    return {
      ruleFormRef: "",
      ruleForm: {
        img: "", //base 64 编码格式
        alt: "",
        link: "",
      },
      rules: {
        img: [{ required: true, trigger: "blur" }],
        alt: [{ required: true, trigger: "blur" }],
        link: [{ required: true, trigger: "blur" }],
      },
      imageUrl: "", //图片上传后的预览地址
    };
  },
  components: {
    Plus,
  },
  mounted() {
    this.ruleFormRef = this.$refs.ruleFormRef;
  },
  methods: {
    //提交表单
    submitForm(formEl) {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          //调用上传接口
          addswiperlist(this.ruleForm).then((res) => {
            console.log("上传", res);
            if (res.data.code == 200) {
              //跳转轮播图列表
              this.$router.push("/home/swipermanage/swiperlist");
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    //重置表单
    resetForm(formEl) {
      if (!formEl) return;
      formEl.resetFields();
    },
    //自定义上传xhr方法
    httprequestFn(data) {
      // console.log("图片上传", data);
      // (01).对上传的文件类型进行格式转换;
      let imgTypes = ["image/jpeg", "image/jpg", "image/png"];
      if (!imgTypes.includes(data.file.type)) {
        ElMessage({
          message: "上传的图片格式不正确",
          type: "warning",
        });
        //设置 return 函数到此执行结束;
        return;
      }
      // 02 对图片的大小进行设置
      if (data.file.size / 1024 / 1024 > 2) {
        ElMessage({
          message: "图片的大小不能超过两招",
          type: "warning",
        });
        return;
      }
      // 03 将图片转换为base64格式
      this.getbase64Format(data.file).then((res) => {
        console.log(res);
        // console.log(res);
        this.ruleForm.img = res;
      });
      // 04设置图片的预览地址
      //URL.createObjectURL是一个方法
      this.imageUrl = URL.createObjectURL(data.file);
    },

    getbase64Format(file) {
      // 转成的base64的 过程是一个异步过程,所以咱们可以使用promise 封装一下
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
        // 监听读取文件 为 base64
        reader.onload = () => {
          fileResult = reader.result;
        };
        // 读取错误的时候触发
        reader.onerror = (error) => {
          reject(error);
        };
        // 读取结束
        reader.onloadend = () => {
          resolve(fileResult);
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  width: 360px;
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  :deep(.avatar-uploader) {
    border: 1px dashed black;
  }
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>